<template>
  <div>
    <!-- <input type="text" v-model="keywords" /> -->
     <div> <van-search v-model="keywords" placeholder="请输入搜索关键词" /></div>
     <button @click="search">搜索</button>
     <!-- <form action="/">
  <van-search
    v-model="keywords"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form> -->
    
    <h2 v-if="arr.length == 0">暂无数据~换个关键词试试</h2>
    <div
      class="tu"
      v-for="item in arr"
      :key="item.id"
      @click="$router.push({ name: '商品详情', params: { id: item.id } })"
    >
      <div><img :src="$pre + item.img" alt="" /></div>
      <div>
        <div>
          <p>{{ item.goodsname }}</p>
        </div>
        <div>
          <p>价格：{{ item.market_price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {reqsearch} from "../../http/http"
export default {
  data() {
    return {
      keywords: "",
      arr: [],
    };
  },

  methods: {
    search() {
     reqsearch({
          keywords: this.keywords,
        }).then((res) => {
        console.log(res);
        this.arr = res.data.list;
      });
    },
  },
};
</script>

<style scoped>
.tu {
  border: 0.01rem solid #000;
  width: 7rem;
  display: flex;
}
img {
  width: 2rem;
  height: 2rem;
}
</style>
